@charset "UTF-8";

@import './sassConfig.scss';
// sass基本语法
body >.container > header { background-color: #fff; }
.main-color{color: $main-color;}
.second-color { color: $second-color; }
.main-text { color: $main-text; }

// clearfix 清除浮动
.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 .clearfix{ display: inline-block; }
* html .clearfix{ height: 1%; }
.clearfix { display: block; }

//float浮动
.pull-left{ float: left; }
.pull-right{ float: right; }

// text-align文本对齐
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

// display隐藏
.hidden { display: none; }

//position定位
.position-relative { position: relative; }
.position-absolute { position: absolute; }

// background-color
.bg-color-f7 { 
    background-color: #f7f7f7;
 }
.image-cover{
    // background-image: url(${item.imgUrl});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


//内容宽度
.container{
    width: $container;
    margin: 0 auto;
    // background-color: red;
    // color: white;
}

.logo{
    float: left;
    margin: 30px 0;
    // border: 2px black;
    img{
        display: block;
        height: 56px;
    }
}
//头部
.menu-link{
    margin-top: 7px;
    margin-bottom: 21px;
    line-height: 22px;
    a, span, div{ float: right; }
    a { color: $text-gray; }
    span{
        width: 1px;
        height: 12px;
        margin: 6px 11px 0;
        background-color: #cfcfcf;
    }
}

.lang{
    position: relative;
    height: 22px;
    width: 53px;
    background-color: #ececec;
    color: $text-gray;
    text-align: center;
    &:after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 0 2px 2px;
        border-left: 1px solid #b5b5b5;
        border-bottom: 1px solid #b5b5b5;
        // Css3
        @include webkit(box-sizing, border-box);
        @include webkit(transform, rotate(-45deg));
    }
    // &:hover {
    //     ul { display: block; }
    // }
    ul {
        display: none;
        position: absolute;
        // z-index 属性指定一个元素的堆叠顺序 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
        // z-index 进行定位元素(position:absolute, position:relative, or position:fixed) 数字越大越在上面
        z-index: 10;
        top: 100%;
        right: 0;
        width: 95px;
        background-color: #ececec;
    }
    a {
        display: block;
        width: 100%;
        height: 28px;
        line-height: 28px;
        text-align: center;
        &:hover {
            color: $main-color;
            background-color: #e0e0e0;
        }
    }
}
.lang:hover ul{ display: block; }
 


// 头部导航nav
// > 表示第二个选择器只会选择nav下 紧跟着 的子元素中命中ul选择器的元素
nav {
    // background-color: brown;
    > ul {
        > li {
            float: left;
            > a {
                color: #000;
                font-weight: bold;
                &:after {
                    content: '';
                    display: none;
                    position: absolute;
                    left: 50%;
                    bottom: -5px;
                    z-index: 2;
                    // css3绘制三角形
                    margin-left: -5px;
                    border-top: 5px solid #f5f5f5;
                    border-right: 5px solid transparent;
                    border-left: 5px solid transparent;
                }
            }
            &:hover,
            &.current {
                a { background-color: #f5f5f5; }
                a:after { display: block; }
            }
            > ul { padding-top: 17px; }
        }
    }
    ul {
        ul {
            display: none;
            position: absolute;
            z-index: 100;
            a {
                height: 41px;
                color: #000;
                line-height: 41px;
                &:hover {
                    background-color: #eaeaea;
                }
            }
            ul {
                left: 100%;
                top: 0;
            }
        }
    }
    li {
        position: relative;
        &:hover {
            > ul { display: block; }
        }
        a {
            display: block;
            width: 114px;
            height: 53px;
            text-align: center;
            line-height: 53px;
        }
    }
}

// footer
body > footer {
    padding-top: 74px;
    background-color: #eaeaea;
}
#copyright {
    margin-top: 59px;
    border-top: 1px solid #dbdbdb;
    line-height: 48px;
    color: #a0a0a0;
}
.footer-contact-info {
    h5 {
        margin-bottom: 18px;
        font-size: 24px;
        color: #717171;
    }
    p {
        font-size: 13px;
        color: #a0a0a0;
        line-height: 23px;
    }
    a { color: #a0a0a0; }
}
.share {
    margin-top: 32px;
    a {
        position: relative;
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 24px;
        background-color: #a0a0a0;
        line-height: 30px;
        text-align: center;
        color: #fff;
        // 圆角
        border-radius: 100px;
        &:hover {
            p {
                visibility: visible;
                bottom: 150%;
                opacity: 1;
                filter: alpha(opacity = 100);
            }
        }
    }
    //阿里巴巴图标
    .iconfont { font-size: 18px; }
    p {
        display: block;
        // visibility属性指定一个元素是否是可见的  即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
        // visible默认值。元素是可见的  hidden元素是不可见的  
        // collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"  inherit规定应该从父元素继承 visibility 属性的值
        visibility: hidden;
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 80px;
        height: 80px;
        margin-left: -44px;
        padding: 4px;
        background-color: #fff;
        border-radius: 6px;
        /* 设置一个div元素的透明度级别 0(完全透明)~1.0
        CSS3的filter Filters主要是运用在图片上，以实现一些特效,其默认值是none
            alpha可以应用于元素特定的属性（比如背景、边框、文字），且alpha只作用于这个属性，该属性的任何子元素都不会继承这个透明度。
            grayscale灰度
            sepia褐色（求专业指点翻译）
            saturate饱和度
            hue-rotate色相旋转
            invert反色
            opacity透明度
            brightness亮度
            contrast对比度
            blur模糊
            drop-shadow阴影
         */
        opacity: 0;
        filter: alpha(opacity = 0);
        /* 相当于CSS3 opacity 透明，而filter属性是IE特有的，它还有很多其它滤镜效果，而filter: alpha(opacity=0); 兼容IE8及以下的IE浏览器， 而在支持CSS3 opacity 的浏览器中，可以 opacity:0; */
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, .16));
        // 元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}
        @include webkit(transition, all .3s ease 0s);
        &::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            margin-left: -4px;
            border-top: 4px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
        }
    }
    img { width: 100%; height: 100%; }
}
.sing-share {
    // background-image: url(../images/icon-share.png);
    &:hover { background-color: #dc261b; }
}
.wechat-share {
    // background-image: url(../images/icon-share.png);
    &:hover { background-color: #3cb035; }
}

.footer-menu {
    dl {
        float: left;
        margin-left: 38px;
        img {
            width: 100%;
            height: 100%;
            margin-bottom: 9px;
            border: 2px solid #fff;
            @include webkit(box-sizing, border-box)
        }
    }
    dt {
        padding-bottom: 17px;
        padding-right: 26px;
        margin-bottom: 14px;
        margin-top: 6px;
        border-bottom: 1px solid #c5c5c5;
    }
    dd { line-height: 24px; }
    a { color: #717171; }
}
.wechat-code { width: 78px; }

//内容宽度
.main-column {
    text-align: center;

    h3 {
        font-size: 26px;
        font-weight: normal;
    }
    p {
        margin-top: 12px;
        color: $text-gray;
        text-transform: Uppercase;
    }
    span {
        display: inline-block;
        height: 10px;
        margin: 0 9px;
        border-left: 1px solid #cfcfcf;
    }
}

// 加载提示
@keyframes loading {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}
.loading-wait {
    padding: 20px 0;
    background-color: #f1f1f1;
    text-align: center;
    font-weight: normal;
    .loading-icon {
        margin-top: 15px;
        @include webkit(transform, rotate(0deg));
        animation: loading 1s ease infinite; 
    }
}

/* 查看更多 按钮*/
.link-more {
    display: block;
    width: 92px;
    height: 29px;
    border: 1px solid #676767;
    text-align: center;
    line-height: 26px;
    .iconfont {
        position: relative;
        top: 2px;
        font-weight: 700;
    }
    // &.bordernone{ border: none; }
}


// for循环定义 padding 偏移值
@for $i from 1 through 110 {

    .padding-top-#{$i} { padding-top:(1px * $i); }
    .padding-bottom-#{$i} { padding-bottom:(1px * $i); }
}
